<template>
    <div :class="['show_status', showStatus.status || '', status]">
        <span class="status" v-if="dot"></span>
        <span class="status_name">{{ showStatus.label || showStatus.name }}{{ extra }}</span>
    </div>
</template>
<script>
export default {
    name: 'ListStatus',
    props: {
        data: {
            type: Array,
            default: () => []
        },
        value: {
            type: Number | String,
            default: 0
        },
        type: {
            type: String,
            default: 'value'
        },
        extra: {
            type: String,
            default: ''
        },
        status: {
            type: String,
            default: ''
        },
        dot:{
            type:Boolean,
            default:true
        }
    },
    computed: {
        showStatus() {
            return this.data.find(item => item[this.type] == this.value);
        }
    }
};
</script>

<style lang="scss" scoped>
.show_status {
    display: flex;
    flex-direction: row;
    align-items: center;
    // justify-content: center;
    &.success {
        color: #18bc9c;
        .status {
            background: #18bc9c;
        }
    }
    &.warning {
        color: #ffaa3c;
        .status {
            background: #ffaa3c;
        }
    }
    &.waiting {
        color: #1a80dc;
        .status {
            background: #1a80dc;
        }
    }
    &.error {
        color: #f75444;
        .status {
            background: #f75444;
        }
    }
    &.off {
        color: #333333;
        .status {
            background: #333333;
        }
    }
    &.discard {
        color: #b7b7b7;
        .status {
            background: #b7b7b7;
        }
    }
    .status {
        margin-right: 5px;
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 100%;
    }
    .status_name {
        font-size: 14px;
        // color: #333;
    }
}
</style>
